<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" href="../static/css/bootstrap.css">
    <style type="text/css">
        .test{
            width:33.3%;
        }
        .mybutton{
            width: 200px;
        }
        .header_span{
            /*vertical-align: center;*/
            line-height: 50px;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            font-size: 18px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_957101_dfsm13jp2km.css">
</head>
<body>
   <header>
        <span class="header_span">个人中心</span>
        <ul class="nav nav-tabs myul" style="float: right;">
            <li class="active" style="float: left;"><a href="">首页</a></li>
            <li ><a href="#">活动</a></li>
            <li><a href="#">统计</a></li>
            <li><a href="#">资料</a></li>
            <li><a href="#">通知</a></li>
            <li><a href="#">作业</a></li>
            <li><a href="#">考试</a></li>
            <li><a href="#">讨论</a></li>
            <li><a href="#">管理</a></li>
        </ul>
    </header>
    <div>
         <select style="margin-left: 20px">
             <option>计算机系</option>
         </select>
         <select>
             <option>计算机科学与技术</option>
         </select>
         <select>
             <option>计科六班</option>>
             <option>计科五班</option>
         </select>
         <div style="float: right;">
             <input type="text" placeholder="请输入关键字进行查询" name="importgrammer" id="importgrammer" th:value="${studentname}">
             <i class="iconfont icon-selected" id="search"></i>
         </div>
    </div>
<table align='center' border='1' cellspacing='0' class="table table-hover" style="width: 100%">
    <tr>
        <th class="test" >添加</th>
        <th class="test">学号</th>
        <th class="test">姓名</th>
    </tr>
    <tr   th:each="student,Start:${page.content}">
        <td class="test"><input type="checkbox" name="items"/></td>
        <td class="test"  th:text="${student.account}"></td>
        <td class="test" th:text="${student.name}"></td>
        <td hidden th:text="${student.id}"></td>
    </tr>
</table>
<div style="float: left;">
    <input type="checkbox" id="allcheck" name="allcheck"/>全选
</div>
<div align="center">
    <button class="btn btn-default mybutton" id="addstudentbutton">添加</button>
</div>
<div align="center">
    <a th:href="@{'/dataAddStudent?start=0&studentname='+${studentname}}">【首页】</a>
    <a th:href="@{'/dataAddStudent?start='+${page.number-1}+'&studentname='+${studentname}}">【上一页】</a>
    <a th:if="${page.number+1}<=${page.totalPages-1}" th:href="@{'dataAddStudent?start='+${page.number+1}+'&studentname='+${studentname}}">【下一页】</a>
    <a th:href="@{'/dataAddStudent?start='+${page.totalPages-1}+'&studentname='+${studentname}}">【末页】</a>
</div>
    <script th:src="@{/js/jquery-3.3.1.js}" src="../static/js/jquery-3.3.1.js"></script>
    <script th:src="@{/js/bootstrap.js}" src="../static/js/bootstrap.js"></script>
</body>
<script type="text/javascript">
    $("#allcheck").click(function(){
        var flag=this.checked;
        $(":checkbox[name='items']").prop('checked',flag);
    });
        //而且还实现了:当其中不勾选某一个选项的时候,则去掉全选复选框
    $(":checkbox[name='items']").click(function(){
        $("#allcheck").prop('checked',
            $(":checkbox[name='items']").length==$(":checkbox[name='items']:checked").length);
    });

    $("#addstudentbutton").click(function(){
        var ids=[];
        $("input[name='items']:checked").each(function(){
            var shuzi=$(this).parent().nextAll(":hidden").text();
            ids.push(shuzi);
        })
        var final=ids.join(",");
        console.log(final);
        if(final=='')
        {
            alert("未选择学生-----请选择学生");
        }
        else
        {
            //进入ajax
            $.ajax({
                url:"dataAddStudentLogic",
                type:"POST",
                data:{
                    test:1,
                    "final":final
                },
                async:false,
                success:function(data){
                    console.log(data);
                    alert("回调成功");
                },
                error:function(data){
                    alert("回调失败");
                }

            })
        }
    });
    $("#search").click(function(){
        console.log("seache ok");
        //再走一遍逻辑层吧
        var importgrammer=$("#importgrammer").val();
        console.log(importgrammer);
        window.location.href=("/dataAddStudent?studentname="+importgrammer);
    })
</script>
</html>